<template>
  <KView class="order-delivery-address" @click="hanleClick">
    <KView class="order-delivery-address-title">配送至</KView>
    <KView class="order-delivery-address-content">
      <KView class="order-delivery-address-location flex-central">
        <sys-svg name="location"></sys-svg>
      </KView>
      <KView class="order-delivery-address-data">
        <template v-if="order.buyerName!==''">
          <KView class="order-delivery-address-user">
            <span>{{order.buyerName}}</span>
            <span>{{order.buyerPhone}}</span>
          </KView>
          <KView class="order-delivery-address-text">{{order.buyerAddress}}</KView>
        </template>
      </KView>
      <KView class="order-delivery-address-arrow flex-central">
        <sys-svg name="arrowRight"></sys-svg>
      </KView>
    </KView>
  </KView>
</template>

<script>
  import SysSvg from 'common/sysSvg';

  export default {
    props: {
      order: {
        type: Object,
        required: true
      }
    },

    data() {
      return {};
    },

    methods:{
      hanleClick(){
        this.$emit('click');
      }
    },

    components: {
      SysSvg
    }
  };

</script>

<style lang="scss">
  .order-delivery-address {
    padding: 0 formatPx(30);
    font-size: formatPx(30);
    color: #333333;

    .order-delivery-address-content {
      display: flex;
      margin-top: formatPx(28);

      .order-delivery-address-location {
        width: formatPx(35);
        margin-right: formatPx(16);

        .sys-svg {
          width: formatPx(35);
          height: formatPx(35);
        }
      }

      .order-delivery-address-data {
        flex: 1;

        .order-delivery-address-user {
          line-height: formatPx(38);

          >span {
            margin-right: formatPx(26);

            &:last-child {
              margin-right: 0;
            }
          }
        }

        .order-delivery-address-text {
          margin-top: formatPx(16);
          line-height: 1.3;
        }
      }

      .order-delivery-address-arrow {
        width: formatPx(28);

        .sys-svg {
          width: formatPx(28);
          height: formatPx(35);
        }
      }
    }
  }

</style>
